<template>
	<view class="parent-box">
		<view class="contenter">

			<view class="item-box">
				<view class="title">基础信息</view>
				<view class="item_content">
					<view class="row">
						<view class="item l">
							<text class="label">贷款账号:</text>
							<text class="val">{{form.loanAccount}}</text>
						</view>
					</view>
					<view class="row space-between">
						<view class="item l">
							<text class="label">贷款人:</text>
							<text class="val">{{form.customerName}}</text>
						</view>

					</view>
					<view class="row">
						<view class="item r">
							<text class="label">贷款类别:</text>
							<text class="val">{{form.classification=='0'?'个人或个体工商户':'公司贷款'}}</text>
						</view>
					</view>
					<view class="row" v-if="form.classification=='0'">
						<view class="item r">
							<text class="label">性别:</text>
							<text class="val">{{form.sex=='0'?'男':form.sex=='1'?'女':'未知'}}</text>
						</view>
					</view>
					<view class="row" v-if="form.classification=='0'">
						<view class="item">
							<text class="label">工作单位:</text>
							<text class="val">{{form.loanWorkUnit}}</text>
						</view>
					</view>
					<view class="row " v-if="form.classification=='0'">
						<view class="item">
							<text class="label">职务:</text>
							<text class="val">{{form.loanWork}}</text>
						</view>

					</view>
					<view class="row">
						<view class="item">
							<text class="label">联系方式:</text>
							<text class="val">{{form.currentPhone}}</text>
						</view>

					</view>
					<view class="row">
						<view class="item">
							<text class="label">联系地址:</text>
							<text class="val">{{form.currentAddress}}</text>
						</view>
					</view>
					<view class="row" v-if="form.classification=='1'">
						<view class="item">
							<text class="label">法人:</text>
							<text class="val">{{form.legalPerson}}</text>
						</view>

					</view>
					<view class="row" v-if="form.classification=='1'">
						<view class="item">
							<text class="label">法人联系方式:</text>
							<text class="val">{{form.legalContactInfo}}</text>
						</view>
					</view>
					<view class="row" v-if="form.classification=='1'">
						<view class="item">
							<text class="label">法人证件号:</text>
							<text class="val">{{form.legalIdNumber}}</text>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<text class="label">贷款方式:</text>
							<text class="val">{{form.loanMethod}}</text>
						</view>
						<view class="item">
							<text class="label">贷款机构:</text>
							<text class="val">{{form.loanInstitutionName}}</text>
						</view>
					</view>

					<view class="row ">
						<view class="item">
							<text class="label">贷款用途:</text>
							<text class="val">{{form.loanPurpose}}</text>
						</view>
					</view>

				</view>
			</view>


			<view class="item-box">
				<view class="title">贷款信息</view>
				<view class="item_content">
					<view class="row ">
						<view class="item">
							<text class="label">贷款日期:</text>
							<text class="val">{{form.loanDate}}</text>
						</view>
						<view class="item">
							<text class="label">还款日期:</text>
							<text class="val">{{form.repaymentDate}}</text>
						</view>
					</view>

					<view class="row ">
						<view class="item">
							<text class="label">诉讼时效:</text>
							<text class="val">{{form.statuteLimitationsLitigation}}</text>
						</view>

					</view>
					<view class="row ">
						<view class="item">
							<text class="label">合同利率:</text>
							<text class="val">{{form.interestRate}}%</text>
						</view>
						<view class="item">
							<text class="label">加罚利率:</text>
							<text class="val">{{form.penaltyInterestRate}}%</text>
						</view>

					</view>
					<view class="row">
						<view class="item">
							<text class="label">展期利率:</text>
							<text class="val">{{form.extensionInterestRate}}%</text>
						</view>
					</view>
					<view class="row ">

						<view class="item">
							<text class="label">贷款金额:</text>
							<text class="val">{{form.loanAmount?form.loanAmount:0}}元</text>
						</view>
						<view class="item">
							<text class="label">利息:</text>
							<text class="val">{{form.interest?form.interest:0}}元</text>
						</view>
					</view>
					<view class="row ">
						<view class="item">
							<text class="label">罚息:</text>
							<text class="val">{{form.interestPenalty?form.interestPenalty:0}}元</text>
						</view>

					</view>
					<view class="row ">
						<view class="item">
							<text class="label">欠本金:</text>
							<text class="val">{{form.amountArrears?form.amountArrears:0}}元</text>
						</view>
						<view class="item">
							<text class="label">欠利息:</text>
							<text class="val">{{form.interestAmount?form.interestAmount:0}}元</text>
						</view>

					</view>
					<view class="row">
						<view class="item">
							<text class="label">欠罚息:</text>
							<text class="val">{{form.oweInterestPenalty?form.oweInterestPenalty:0}}元</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 	<view class="item-box">
				<view class="title">家庭成员信息</view>
				<view class="table_box">

					<uni-notice-bar single text="温馨提示：如显示不全请往左滑动！"></uni-notice-bar>
					<uni-table border stripe emptyText="暂无数据">

						<uni-tr>
							<uni-th align="center" width="100">与本人关系</uni-th>
							<uni-th align="center" width="80">姓名</uni-th>
							<uni-th align="center" width="100">联系方式</uni-th>
							<uni-th align="center" width="150">工作单位</uni-th>
							<uni-th align="center" width="90">职务</uni-th>
						</uni-tr>

						<uni-tr v-for="row in form.familyList" :key="row.id">
							<uni-td align="center">{{row.relationship}}</uni-td>
							<uni-td align="center">{{row.name}}</uni-td>
							<uni-td align="center">{{row.phone}}</uni-td>
							<uni-td align="center">{{row.workUnit}}</uni-td>
							<uni-td align="center">{{row.position}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view> -->

			<view class="item-box">
				<view class="title">抵押物</view>
				<view class="item_content" style="   padding: 5px 5px">
					<view class="list_box" v-if="form.collateralList.length>0">
						<view class="item_box" v-for="row in form.collateralList" :key="row.id">
							<view class="row">
								<view class="item">
									<text class="label">抵押物:</text>
									<text class="val">{{row.collateralName}}</text>
								</view>
							</view>

							<view class="row ">
								<view class="item">
									<text class="label">抵押时间:</text>
									<text class="val">{{row.collateralDate}}</text>
								</view>
								<view class="item">
									<text class="label">评估时间:</text>
									<text class="val">{{row.evaluateDate}}</text>
								</view>
							</view>
							<view class="row ">
								<view class="item">
									<text class="label">评估总价:</text>
									<text class="val">{{row.evaluateTotalPrice}}元</text>
								</view>
								<view class="item">
									<text class="label">确认价值:</text>
									<text class="val">{{row.confirmValue}}元</text>
								</view>
							</view>
							<view class="row">
								<view class="item">
									<text class="label">物品描述:</text>
									<text class="val">{{row.descrption}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="empty" v-else>
						暂无数据 !
					</view>

				</view>
			</view>

			<view class="item-box">
				<view class="title">现居地址</view>
				<view class="item_content">
					<view id="mapContainer">
						<text v-if="distance" class="distanceBox">距离目的地{{distance}}</text>
						<button type="primary" @click="openGaodeMap">精准导航</button>
					</view>

				</view>

			</view>


		</view>



		<!-- 		催办 -->
		<!-- <UrgeForm ref="UrgeFormRef" @reashList="getUrgeList"></UrgeForm> -->
		<!-- 还款 -->
		<!-- <RepaymentRecordForm ref="RepaymentRecordFormRef" @reashList="getRepaymentRecordList"></RepaymentRecordForm> -->
		<!-- 退回至领导 -->
		<!-- <BackForm ref="backFormRef" @updateHasBack="()=>hasBack=true"></BackForm>

		<VerificationForm ref="verificationFormRef" @updateHasVerification="()=>hasVerification=true">
		</VerificationForm>


		<LitigationForm ref="litigationFormRef" @reashList="getLitigationList" /> -->
	</view>
</template>

<script>
	import {
		getPerformingLoan
	} from '@/common/api/performingLoan.js'
	// import {
	// 	listRepaymentRecord

	// } from "@/api/repaymentRecord";
	// import {
	// 	listUrge
	// } from "@/api/urge";
	// import {
	// 	listLitigation
	// } from "@/api/litigation";
	// import {
	// 	getBack
	// } from "@/api/back";
	// import {
	// 	calculateDistance
	// } from "@/api/map.js";

	// import {
	// 	getDispatchWork
	// } from "@/api/DispatchWork.js";
	// import UrgeForm from '@/pages/components/urgeForm.vue'
	// import RepaymentRecordForm from '@/pages/components/repaymentRecordForm.vue'
	// import BackForm from '@/pages/components/BackForm.vue'
	// import VerificationForm from '@/pages/components/verificationForm.vue'
	// import LitigationForm from '@/pages/components/litigationForm.vue'
	import AMapLoader from "@amap/amap-jsapi-loader";
	// import ImagePreview from '@/components/ImagePreview/ImagePreview.vue'

	import {
		securityJsCode,
		key
	} from '@/config/env.js'
	export default {
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

			this.id = option.id
			// this.flg = option.flg
			// this.dispatchWorkMainId = option.dispatchWorkMainId
			// this.backId = option.backId
			this.getDetail(option.id)

			// if (this.flg == '4') { //获取退回信息
			// 	this.getBackInfo()
			// }

		},
		beforeDestroy() {
			this.map?.destroy();
		},
		watch: {

		},
		onReady() {
			// document.getElementById("test").innerText = "测试"
		},
		components: {
			// UrgeForm,
			// RepaymentRecordForm,
			// BackForm,
			// VerificationForm,
			// LitigationForm,
			// ImagePreview
		},
		data() {
			return {
				id: null,
				flg: '0', //0表示有待催办点进详情里，1表示有待诉讼点进详情里,3表示已核销
				dispatchWorkMainId: '',
				hasBack: false, //是否已退回
				hasVerification: false,
				map: null,
				distance: '', //从当前位置到目的地的距离
				backId: '',
				form: {
					collateralList: [],
					currentAddressLonLat: []
				},
				openList: ['base_info', 'repaymentRecord', 'loan_info', 'family', 'collateral', 'urgeRecord',
					'litigationRecord'
				],
				startLonLat: [], //当前位置的经纬度
				startAddress: '当前位置', //当前位置  
				customerAddressLonLat: [], //客户位置的经纬度
				customerAddress: '', //客户位置
				urgeList: [],
				repaymentRecordList: [],
				litigationList: []
			}
		},
		methods: {
			closeClick() {
				alert('关闭');

			},
			//获取派工信息
			getDispatchWorkInfo() {
				debugger;
				getDispatchWork(this.dispatchWorkMainId).then(({
					data
				}) => {
					this.form.startDate = data.startDate;
					this.form.endDate = data.endDate
				})
			},
			getBackInfo() {
				getBack(this.backId).then(({
					data
				}) => {
					this.form.backTime = data.operatorTime
					this.form.backReason = data.backReason
					this.form.ReturnStage = data.type == '0' ? '催办退回' : '诉讼退回'
				})
			},
			openGaodeMap() {

				if (this.startLonLat && this.startLonLat.length > 1 && this.customerAddressLonLat && this
					.customerAddressLonLat.length > 1) {

					window.location =
						`https://uri.amap.com/navigation?from=${this.startLonLat[0]},${this.startLonLat[1]},当前位置&to=${this.customerAddressLonLat[0]},${this.customerAddressLonLat[1]},${this.form.currentAddress}&src=mypage&callnative=1`
				} else if (this.customerAddressLonLat && this.customerAddressLonLat.length > 1) {

					window.location =
						`https://uri.amap.com/marker?callnative=1&position=${this.customerAddressLonLat[0]},${this.customerAddressLonLat[1]}&name=` +
						this.form.currentAddress
				}

				// alert("dd2")
				// window.location =
				// 	`https://uri.amap.com/navigation?from=116.478346,39.99  to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&callnative=0`
				// return;
				// window.location =
				// 	`https://uri.amap.com/navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&callnative=0`
			},
			getDetail(id) {
				getPerformingLoan(this.id).then(response => {
					this.form = response.data;
					this.customerAddress = response.data.currentAddress
					// this.getDispatchWorkInfo()
					// this.getUrgeList(id)
					// this.getRepaymentRecordList(id)
					// this.getLitigationList(id)
					this.initAMap(this.form.currentAddressLonLat)

				});
			},

			initAMap(CustomerAddressLonLat) {

				if (CustomerAddressLonLat && CustomerAddressLonLat.length > 0) {
					this.customerAddressLonLat = CustomerAddressLonLat;
					//this.getDistance(currentAddressLonLat)
					window._AMapSecurityConfig = {
						securityJsCode: securityJsCode,
					};


					//打开信息窗体

					AMapLoader.load({
							key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
							version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
							plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
						})
						.then((AMap) => {
							this.map = new AMap.Map("mapContainer", {
								resizeEnable: true,
								// 设置地图容器id
								viewMode: "3D", // 是否为3D地图模式
								zoom: 11, // 初始化地图级别
								center: CustomerAddressLonLat, // 初始化地图中心点位置
							});

							//标记客户位置
							this.createMapInfoWindow(AMap, CustomerAddressLonLat)
							//获取当前的经纬度
							// alert("开始加载当前位置")
							//this.getCurrentLonLat(AMap, CustomerAddressLonLat)

						})
						.catch((e) => {
							console.log(e);
						});
				}

			},
			createMapInfoWindow(AMap, CustomerAddressLonLat) {

				//信息窗体的内容
				var content =
					` <view  class="content-window-card" onclick="openGaodeMap">${this.form.currentAddress}<view>`;
				//创建 infoWindow 实例
				var infoWindow = new AMap.InfoWindow({
					content: content, //传入字符串拼接的 DOM 元素
					// anchor: "top-left",
					//anchor: "bottom-center",
					offset: new AMap.Pixel(0, -30), //设置点标记偏移量
					anchor: "bottom-center",
				});
				infoWindow.open(this.map, this.map.getCenter());

				const marker = new AMap.Marker({
					position: CustomerAddressLonLat //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					// ,title: "北京",
				});

				//将创建的点标记添加到已有的地图实例：
				this.map.add(marker);

				// document.getElementById("content-window-card").innerText = "测试"
				// document.getElementById("content-window-card").addEventListener("click", function() {
				// 	if (this.startLonLat) {
				// 		window.location =
				// 			`https://uri.amap.com/navigation?from=${this.startLonLat[0]},${this.startLonLat[1]},当前位置&to=${this.customerAddressLonLat[0]},${this.customerAddressLonLat[1]},${this.form.currentAddress}&src=mypage&callnative=0`
				// 	}

				// });

			},
			//获取当前位置的
			getCurrentLonLat(AMap, CustomerAddressLonLat) {
				// alert("获取当前位置")
				AMap.plugin('AMap.Geolocation', () => {


					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						position: 'RB', //定位按钮的停靠位置
						offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					this.map.addControl(geolocation);
					geolocation.getCurrentPosition((status, result) => {
						// alert(status)
						// alert(JSON.parse(JSON.stringify(result.position)))
						if (status == 'complete') {


							this.startLonLat = JSON.parse(JSON.stringify(result.position))
							var curentLonLat = JSON.parse(JSON.stringify(result.position))
							// alert(curentLonLat)
							calculateDistance({
								startLng: curentLonLat[0],
								startLat: curentLonLat[1],
								endLng: CustomerAddressLonLat[0],
								endLat: CustomerAddressLonLat[1]
							}).then(({
								data
							}) => {
								this.distance = data
								// alert(JSON.stringify(data))
							})

						} else {


						}
					});
				});
			},
			//获取距离目的地的距离
			getDistance(disLonLat) {


				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						// alert("1")
						// alert(res.longitude)
						debugger
						// calculateDistance({
						// 	startLng: res.longitude,
						// 	startLat: res.latitude,
						// 	endLng: disLonLat[0],
						// 	endLat: disLonLat[1]
						// }).then((data) => {
						// 	console.log(data)
						// })
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					},
					fail: function(res) {
						alert("2")
						alert(res.errMsg)
						console.log("22222222222", res)
					},
					complete: function(res) {
						// alert("3")
						// alert(res)
					}
				});
			},
			// intoGaode() {
			// 	// 打开高德地图的指定位置
			// 	const latitude = 39.904989; // 纬度
			// 	const longitude = 116.405285; // 经度
			// 	const url = `https://uri.amap.com/marker?position=${latitude},${longitude}&name=北京&src=uniapp`;

			// 	// 使用navigator.openURL在uni-app中打开URL
			// 	if (window.navigator && window.navigator.openURL) {
			// 		navigator.openURL(url).then(() => {
			// 			alert('成功打开高德地图');
			// 		}).catch(err => {
			// 			for (const key in err) {

			// 				alert(key + "........" + obj[key]);

			// 			}
			// 			// alert('打开高德地图失败: ', err);
			// 		});
			// 	} else {

			// 		alert('当前环境不支持直接打开高德地图');
			// 	}
			// },
			//核销
			verification() {
				this.$refs.verificationFormRef.init(this.id)
			},
			/** 查询催收情况列表 */
			getUrgeList(id) {
				this.loading = true;
				listUrge({
					performingLoanId: id || this.id
				}).then(response => {
					this.urgeList = response.rows;

				});
			},
			back() {
				this.$refs.backFormRef.init(this.form, this.dispatchWorkMainId, this.flg)
			},
			/** 查询诉讼列表 */
			getLitigationList(id) {
				listLitigation({
					performingLoanId: id || this.id
				}).then(response => {
					this.litigationList = response.rows;


				});
			},
			/** 查询还款记录列表 */
			getRepaymentRecordList(id) {
				listRepaymentRecord({
					performingLoanId: id || this.id
				}).then(response => {
					this.repaymentRecordList = response.rows;

				});
			},
			//添加催办
			addUrge() {
				this.$refs.UrgeFormRef.init(this.id)
			},
			//添加还款
			addRepaymentRecord() {
				this.$refs.RepaymentRecordFormRef.init(this.id)
			},
			//添加诉讼
			addLitigation() {
				this.$refs.litigationFormRef.init(this.id, this.form.loanInstitutionId)
			},
			open(e) {
				console.log('open', e)
			},
			close(e) {
				console.log('close', e)
			},
			change(e) {
				// this.openList = e.map((item) => {
				// 	if (item.status == 'open') return item.name
				// })
				console.log('change', e, openList)
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.parent-box {
		padding-bottom: 100rpx;
		height: 100%;
		background-color: #fff;
	}

	.curentAddressCard {
		width: 286px !important;
	}

	.contenter {
		padding: 20rpx 15rpx;
		background-color: #fff;
		// padding-top: var(--window-top);
	}

	::v-deep .u-tabbar__content {
		background-color: #eee;
	}

	.title {
		background: #F9F9FB;
		color: rgb(0, 0, 0);
		font-weight: 700;
		position: relative;
		border-bottom: 1rpx solid #ccc;
		border-top: none !important;
		padding: 10px 15px;


		// &::before {
		// 	position: absolute;
		// 	top: 50%;
		// 	content: "";
		// 	display: inline-block;
		// 	width: 10rpx;
		// 	height: 40rpx;
		// 	background-color: #345DC2;
		// 	transform: translateY(-50%);
		// 	margin-left: 10rpx;
		// }
	}



	::v-deep uni-view.u-row {
		margin-bottom: 20rpx;
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;

		justify-content: space-between;
		background-color: #eee;
		padding: 0 0;
		margin: 0;
		z-index: 99;
		font-size: 28rpx;

		view {
			opacity: 1;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			// padding: 10rpx 0;
			padding-bottom: 10rpx;
			padding-top: 4rpx;
		}

		::v-deep .u-button {
			// flex: 1;
			margin: 0 10rpx;
			// width: 151rpx;

			text-align: center;
			padding: 20rpx 28rpx;
			border-top: 1rpx solid #ccc;
			border-right: 1rpx solid #ccc;
			font-size: 28rpx;
			min-width: 10rpx;
		}

	}

	::v-deep .u-col {
		display: flex;
	}

	.item_content {
		font-size: 26rpx;
		color: rgb(0, 0, 0);
		// font-weight: 700;
		// letter-spacing: 0.5rpx;
		padding: 12px 15px;

		.row {
			margin: 25rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.label {
			color: #878282;
			width: 120rpx;
			text-align: right;
			padding-right: 10rpx;
		}

		.val {
			color: rgb(0, 0, 0);
			font-weight: 700;
		}
	}

	text {
		display: inline-block;
	}

	.empty {
		text-align: center;
		padding: 20rpx 0;
	}

	.item {}

	::v-deep .u-collapse-item__content {
		padding: 0 0;
		height: auto !important;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0;
	}

	.table_box {
		padding: 26rpx 16rpx
	}

	::v-deep .uni-table-th,
	.uni-table-td {
		font-size: 25rpx;
	}

	.item_box {
		background-color: #fff;
		padding: 10rpx 16rpx;
		margin: 10rpx 0;
		border-radius: 8rpx;
		border-bottom: 1rpx solid #eee;
	}

	::v-deep .u-modal__title {
		text-align: left;
		padding-left: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	::v-deep .u-modal__content {
		padding: 12px 6px 25px 6px;
	}

	// ::v-deep .u-form {
	// 	width: 85%;
	// }

	#mapContainer {
		position: relative;
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 500rpx;
		border: 1rpx solid #eee;

		button {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			z-index: 9;
			font-size: 28rpx;
		}
	}

	.distanceBox {
		position: absolute;
		background-color: #fff;
		bottom: 8rpx;
		z-index: 9999999999;
		left: 10rpx;
		font-weight: 700;
		padding: 10rpx 15rpx;
		font-size: 32rpx;
		border-radius: 20rpx;

	}

	/* 隐藏掉高德logo */
	::v-deep .amap-logo {
		display: none;
		opacity: 0 !important;
	}

	::v-deep .amap-copyright {
		opacity: 0;
	}

	::v-deep .content-window-card {
		display: inline-block;

		position: relative;
		width: 298rpx;
		//padding: 0.75rem 0 0 1.25rem;
		box-shadow: none;
		bottom: 0;
		left: 0;
	}
</style>